<template>
	<div class="pagefull" v-resize="onResize">
		<div class="pagefull-head">
			<slot name="head" />
		</div>

		<div class="pagefull-body" ref="body" v-if="$slots.default">
			<slot />
		</div>
		<div class="pagefull-foot mt-1" v-if="$slots.foot">
			<slot name="foot" />
		</div>
	</div>
</template>
<script>
export default {
	name: "cl-pagefull",
	data() {
		return {
			bodyHeight: 0
		};
	},
	mounted() {
		// console.log(this);
		setTimeout(() => {
			this.onResize();
		}, 300);
	},
	updated() {
		// console.log("updated");
		setTimeout(() => {
			this.onResize();
		}, 300);
	},
	activated() {
		setTimeout(() => {
			this.onResize();
		}, 300);
	},
	methods: {
		resize() {
			this.onResize();
		},
		onResize() {
			this.$nextTick(() => {
				this.bodyHeight = this.$refs?.body?.clientHeight ?? 0;
				this.$emit("resize", this.bodyHeight);
			});
		}
	}
};
</script>
<style lang="scss">
.pagefull {
	height: 100%;
	box-sizing: border-box;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	&-head,
	&-foot {
		box-sizing: border-box;
	}

	&-body {
		box-sizing: border-box;
		flex: 1;
		overflow: hidden;
		> .el-row {
			padding-bottom: 5px;
		}
		> .el-row + .el-row {
			// margin-top: 5px;
		}
	}
	&-head,
	&-body {
		// width: 100%;
		> .el-row {
			overflow-x: auto;
			overflow-y: hidden;
			margin-bottom: 0;
			min-height: 33px;
			&::-webkit-scrollbar {
				height: 6px;
			}
			&::-webkit-scrollbar-thumb {
				background-color: rgba(144, 147, 153, 0.3);
				border-radius: 5px;
			}
			&::-webkit-scrollbar-track {
				background: transparent;
			}
		}
	}
	&-body > .el-row {
		padding-bottom: 10px;
	}
}
</style>
